<!DOCTYPE html>
<html>
<head>
    <title>直播监控</title>
    <#include "/header.html">
    <script src="${request.contextPath}/statics/plugins/ckplayer/ckplayer.js"></script>
</head>
<body>
<div id="webpage" v-cloak>
    <div v-show="appearance.showList">
        <div v-show="appearance.showControllBar" class="grid-btn">
            <span v-show="appearance.showSearchForm">
                <div class="form-group col-sm-2">
                    <input type="text" class="form-control" v-model="q._keyword" @keyup.enter="query" placeholder="关键字">
                </div>
                <a class="btn btn-default" @click="query">查询</a>
            </span>

            <div v-if="records.list <= 0" style="padding: 5% 0px; text-align: center">
                当前没有任何直播
            </div>
            <div class="records">
                <pagination v-if="false && records.totalPage>1" :total="records.total" :current.sync="records.current" v-on:pagechange="selectPage"></pagination>
                <div class="datalist row">
                    <div v-for="(v,i) in records.list" class="col-sm-6 col-md-2 item">
                        <div class="thumbnail">
                            <div class="image">
                                <img @click="preview(v,i,records.list)" :id="'IMG_PREVIEW_' + v.id" :src="v.picFullUrl">
                                <div class="info">
                                    <div style="padding: 5px 10px;">
                                        <h5>{{v.title}} <span>${r"#"}{{v.streamId}}</span></h5>
                                        <h6>${r"#"}{{v.liveRoundId}}</h6>
                                        <h6>{{v.createTime|timestamp2datetime}}</h6>
                                    </div>
                                </div>
                                <div class="bk"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <pagination v-if="records.totalPage>1" :total="records.total" :current.sync="records.current" v-on:pagechange="selectPage"></pagination>
            </div>

        </div>
    </div>
</div>
<script type="js/tpl" id="tpl_live_player">
    <div id="live_video_player">
        <div id='video'></div>
    </div>
</script>
<style type="text/css">
    .datalist{border:solid 0px #fff;}
    .datalist .item{position: relative;}
    .datalist .thumbnail{border:solid 1px #dbdbdb;}
    .datalist .image{overflow: hidden; height: auto; border-bottom: solid 1px #dbdbdb; position: relative;}
    .datalist .image img{width: 100%; cursor: pointer}
    .datalist .bk{position:absolute; bottom: 0px; left: 0px; width: 100%; opacity:0.5; background: #000; height: 80px; z-index: 1}
    .datalist .info{position:absolute; bottom: 0px; left: 0px; width: 100%; opacity:0.5; background: #000; height: 80px; z-index:2; color:#fff}
    .datalist .info h5,.datalist .info h6{margin:0px 0px; height: 22px; line-height: 22px; overflow: hidden}
</style>
<script src="${request.contextPath}/statics/js/modules/live/livesnapshot.js?_${.now?long}"></script>
</body>
</html>